<template>
  <view class="home-page">
    <!-- 顶部导航+搜索 -->
    <view class="top-bar">
      <view class="bg-gradient"></view>
      
      <view class="header-content">
        <!-- 天气信息 -->
        <view class="weather-card" @click="refreshWeather">
          <text class="temperature">{{ weather.temp }}°</text>
          <text class="condition">{{ weather.condition }}</text>
        </view>
        
        <!-- 搜索框 -->
        <view class="search-bar" @click="navigateTo('/pages/search/index')">
          <u-icon name="search" size="20" color="#B1C9EF"></u-icon>
          <input type="text"  placeholder="搜索任务、飞手、课程、设备..." disabled />
          <view class="search-hint">搜索</view>
        </view>
        
        <!-- 城市定位 -->
        <view class="location-card" @click="showCityPicker">
          <text class="city">{{ currentCity }}</text>
          <u-icon name="arrow-down" size="14" color="#B1C9EF"></u-icon>
        </view>
      </view>
      
      <!-- 城市选择器 -->
      <u-picker 
        :show="showPicker"
        :columns="cityList"
        keyName="name"
        @confirm="confirmCity"
        @cancel="showPicker = false"
      ></u-picker>
    </view>
    <!-- 轮播图 -->
	<u-transition :show="showIndex >= 0" name="fade-up" mode="out-in" duration="500">
		<view class="banner-box">
		  <u-swiper
			:list="bannerList"
			height="340"
			radius="20"
			indicator
			keyName="image"
			circular
			indicatorActiveColor="#fff"
			bgColor="#f7f8fa"
			@click="handleBannerClick"
		  ></u-swiper>
		</view>
	
	</u-transition>
      

    <!-- 快捷入口 - 8个核心功能 -->
    <u-transition :show="showIndex >= 1" name="fade-up" mode="out-in" duration="500">
      <view class="quick-entry">
        <view 
          v-for="(item, index) in quickEntries" 
          :key="index"
          class="entry-item"
          hover-class="entry-hover"
          :hover-stay-time="100"
          @click="handleEntryClick(item.path)"
          :style="{transitionDelay: `${index*50}ms`}"
        >
          <view class="icon-box" :style="{background: item.bgColor}">
            <u-icon :name="item.icon" size="32" :color="item.color"></u-icon>
          </view>
          <text class="entry-title">{{ item.title }}</text>
        </view>
      </view>
    </u-transition>

    <!-- 供需广场快捷入口 -->
     <u-transition :show="showIndex >= 2" name="fade-up" mode="out-in" duration="600">
        <view class="section-card job-market">
		  <view class="section-header">
		    <view class="title-wrapper">
		      <u-icon name="bell-fill" size="22" color="#4facfe"></u-icon>
		      <text class="title">无人机人才招聘</text>
		    </view>
		    <text class="more" @click="navigateTo('/pages/job/list')">查看全部 ></text>
		  </view>
          
          <view class="recruitment-cards">
            <!-- 发布招聘卡片 -->
            <view 
              class="recruitment-card employer-card" 
              hover-class="card-hover"
              @click="navigateTo('/pages/recruitment/publish')"
            >
              <div class="card-content">
                <div class="card-icon">
                  <u-icon name="edit-pen" size="48" color="#4facfe"></u-icon>
                </div>
                <div class="card-info">
                  <text class="card-title">发布招聘信息</text>
                  <text class="card-desc">快速发布无人机相关岗位，寻找专业人才</text>
                </div>
              </div>
              <div class="card-arrow">
                <u-icon name="arrow-right" size="28" color="#4facfe"></u-icon>
              </div>
              <!-- 装饰元素 -->
              <div class="decor-element top-left"></div>
              <div class="decor-element bottom-right"></div>
            </view>
            
            <!-- 寻找工作卡片 -->
            <view 
              class="recruitment-card seeker-card" 
              hover-class="card-hover"
              @click="navigateTo('/pages/recruitment/jobs')"
            >
              <div class="card-content">
                <div class="card-icon">
                  <u-icon name="edit-pen" size="48" color="#fa709a"></u-icon>
                </div>
                <div class="card-info">
                  <text class="card-title">寻找无人机工作</text>
                  <text class="card-desc">浏览优质岗位，找到适合你的无人机工作</text>
                </div>
              </div>
              <div class="card-arrow">
                <u-icon name="arrow-right" size="28" color="#fa709a"></u-icon>
              </div>
              <!-- 装饰元素 -->
              <div class="decor-element top-left"></div>
              <div class="decor-element bottom-right"></div>
            </view>
          </view>
          
          <!-- 热门岗位提示 -->
          <view class="hot-jobs-tip" v-if="hotJobs.length > 0">
            <text class="tip-text">热门岗位: </text>
            <text 
              class="job-tag" 
              v-for="(job, index) in hotJobs" 
              :key="index"
              @click="navigateTo(`/pages/recruitment/detail?id=${job.id}`)"
            >
              {{ job.title }}
            </text>
          </view>
        </view>
      </u-transition>

    <!-- 招聘市场 -->
    <u-transition :show="showIndex >= 3" name="fade-up" mode="out-in">
      <view class="section-card job-market">
        <view class="section-header">
          <view class="title-wrapper">
            <u-icon name="bell-fill" size="22" color="#4facfe"></u-icon>
            <text class="title">招聘市场</text>
          </view>
          <text class="more" @click="navigateTo('/pages/job/list')">更多职位 ></text>
        </view>
        
        <view class="job-list">
          <view 
            v-for="(job, idx) in jobs" 
            :key="idx"
            class="job-item"
            hover-class="card-hover"
            @click="navigateTo(`/pages/job/detail?id=${job.id}`)"
          >
            <view class="job-left">
              <view class="job-title">{{ job.title }}</view>
              <view class="job-company">
                <u-icon name="map-fill" size="14" color="#999"></u-icon>
                {{ job.company }} · {{ job.location }}
              </view>
              <view class="job-tags">
                <text class="tag" v-for="(tag, i) in job.tags" :key="i">{{ tag }}</text>
              </view>
            </view>
            <view class="job-right">
              <view class="job-salary">{{ job.salary }}</view>
              <view class="job-apply">
                <u-button 
                  size="mini" 
                  type="primary" 
                  shape="circle"
                  hover-class="button-hover"
                  @click.stop="showApplyDialogs(job)"
                >
                  立即沟通
                </u-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-transition>

    <!-- 找飞手 -->
    <u-transition :show="showIndex >= 4" name="fade-up" mode="out-in">
      <view class="section-card pilot-section">
        <view class="section-header">
          <view class="title-wrapper">
            <u-icon name="account-fill" size="22" color="#4facfe"></u-icon>
            <text class="title">找飞手</text>
          </view>
          <view class="filter-bar">
            <u-dropdown 
              :title="selectedSkill" 
              :options="skillOptions"
              @change="handleSkillChange"
              activeColor="#4facfe"
            ></u-dropdown>
            <u-dropdown 
              :title="selectedLevel" 
              :options="levelOptions"
              @change="handleLevelChange"
              activeColor="#4facfe"
            ></u-dropdown>
            <text class="more" @click="navigateTo('/pages/pilot/list')">查看更多 ></text>
          </view>
        </view>
        
        <scroll-view scroll-x class="pilot-scroll">
          <view 
            v-for="(p, idx) in filteredPilots" 
            :key="idx"
            class="pilot-card"
            hover-class="card-hover"
            @click="navigateTo(`/pages/pilot/detail?id=${p.id}`)"
          >
            <view class="pilot-avatar">
              <image :src="p.avatar" mode="aspectFill"></image>
              <view class="level-badge" :style="{background: p.levelColor}">
                {{ p.level }}
              </view>
            </view>
            <view class="pilot-info">
              <view class="pilot-name">{{ p.name }}</view>
              <view class="pilot-tag">{{ p.tag }}</view>
              <view class="pilot-stats">
                <view class="stat-item">
                  <u-icon name="star-fill" size="12" color="#ffc107"></u-icon>
                  {{ p.rating }}
                </view>
                <view class="stat-item">
                  <u-icon name="order-fill" size="12" color="#4facfe"></u-icon>
                  {{ p.orders }}单
                </view>
              </view>
              <button 
                class="hire-btn"
                hover-class="button-hover"
                @click.stop="navigateTo(`/pages/chat?userId=${p.id}`)"
              >
                立即联系
              </button>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-transition>

    <!-- 技能课堂 -->
    <u-transition :show="showIndex >= 5" name="fade-up" mode="out-in">
      <view class="section-card course-section">
        <view class="section-header">
          <view class="title-wrapper">
            <u-icon name="bookmark-fill" size="22" color="#4facfe"></u-icon>
            <text class="title">技能课堂</text>
          </view>
          <text class="more" @click="navigateTo('/pages/task/points')">全部课程 ></text>
        </view>
        
        <!-- 驾考宝典式分类 -->
        <scroll-view scroll-x class="category-scroll">
          <view 
            v-for="category in courseCategories" 
            :key="category.id"
            class="category-item"
            :class="{active: activeCategory === category.id}"
            @click="activeCategory = category.id"
          >
            {{ category.name }}
          </view>
        </scroll-view>
        
        <scroll-view scroll-x class="lesson-scroll">
          <view 
            v-for="(l, idx) in filteredLessons" 
            :key="idx"
            class="lesson-card"
            hover-class="card-hover"
            @click="navigateTo(`/pages/training/lesson-detail?id=${l.id}`)"
          >
            <image :src="l.cover" mode="aspectFill"></image>
            <view class="lesson-info">
              <view class="lesson-title">{{ l.title }}</view>
              <view class="lesson-progress" v-if="l.progress > 0">
                <text>已学{{ l.progress }}%</text>
                <u-line-progress :percent="l.progress" activeColor="#4facfe"></u-line-progress>
              </view>
              <view class="lesson-footer">
                <u-icon name="eye-fill" size="14" color="#999"></u-icon>
                <text class="views">{{ l.views }}</text>
                <view class="price" :class="{free: l.price === 0}">
                  {{ l.price > 0 ? '¥' + l.price : '免费' }}
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        
        <!-- 模拟考试入口 -->
        <view 
          class="exam-entry"
          hover-class="button-hover"
          @click="navigateTo('/pages/training/exam')"
        >
          <u-icon name="edit-pen-fill" size="28" color="#4facfe"></u-icon>
          <text>法规模拟考试</text>
          <u-icon name="arrow-right" size="20" color="#999"></u-icon>
        </view>
      </view>
    </u-transition>

    <!-- 商城服务 -->
    <u-transition :show="showIndex >= 6" name="fade-up" mode="out-in">
      <view class="section-card shop-section">
        <view class="section-header">
          <view class="title-wrapper">
            <u-icon name="shopping-cart-fill" size="22" color="#4facfe"></u-icon>
            <text class="title">商城服务</text>
          </view>
          <view class="filter-bar">
          
            <text class="more" @click="navigateTo('/pages/shop/shop')">去商城 ></text>
          </view>
        </view>
        
        <scroll-view scroll-x class="product-scroll">
          <view 
            v-for="(g, idx) in filteredProducts" 
            :key="idx"
            class="product-card"
            hover-class="card-hover"
            @click="navigateTo(`/pages/product/detail?id=${g.id}`)"
          >
            <view class="product-tag" v-if="g.tag">{{ g.tag }}</view>
            <view class="product-type-badge" v-if="g.type === 'secondhand'">
              二手
            </view>
            <view class="product-type-badge" v-if="g.type === 'rental'">
              租赁
            </view>
            <image :src="g.image" mode="aspectFill"></image>
            <view class="product-info">
              <view class="product-title">{{ g.title }}</view>
              <view class="product-desc">{{ g.desc }}</view>
              <view class="product-footer">
                <view class="product-price">
                  <text class="current">¥{{ g.price }}</text>
                  <text class="original" v-if="g.originalPrice">¥{{ g.originalPrice }}</text>
                  <text class="unit" v-if="g.type === 'rental'">/天</text>
                </view>
                <view class="product-sales">已{{ g.salesText }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </u-transition>

    <!-- 维修保养 -->
    <u-transition :show="showIndex >= 7" name="fade-up" mode="out-in">
      <view class="section-card maintenance-section">
        <view class="section-header">
          <view class="title-wrapper">
            <u-icon name="info-circle" size="22" color="#4facfe"></u-icon>
            <text class="title">维修保养</text>
          </view>
          <text class="more" @click="navigateTo('/pages/maintenance/list')">更多服务 ></text>
        </view>
        
        <view class="maintenance-services">
          <view 
            class="service-item"
            hover-class="button-hover"
            @click="navigateTo('/pages/maintenance/repair')"
          >
            <u-icon name="info-circle" size="40" color="#4facfe"></u-icon>
            <text>故障维修</text>
          </view>
          <view 
            class="service-item"
            hover-class="button-hover"
            @click="navigateTo('/pages/maintenance/maintain')"
          >
            <u-icon name="info-circle" size="40" color="#4facfe"></u-icon>
            <text>定期保养</text>
          </view>
          <view 
            class="service-item"
            hover-class="button-hover"
            @click="navigateTo('/pages/maintenance/parts')"
          >
            <u-icon name="info-circle" size="40" color="#4facfe"></u-icon>
            <text>配件更换</text>
          </view>
          <view 
            class="service-item"
            hover-class="button-hover"
            @click="navigateTo('/pages/maintenance/detection')"
          >
            <u-icon name="eye-fill" size="40" color="#4facfe"></u-icon>
            <text>验机服务</text>
          </view>
        </view>
        
        <view class="nearby-shops" v-if="nearbyShops.length > 0">
          <text class="shops-title">附近服务点 ({{ nearbyShops.length }})</text>
          <view class="shop-list">
            <view 
              class="shop-item"
              v-for="(shop, idx) in nearbyShops" 
              :key="idx"
              hover-class="card-hover"
            >
              <text class="shop-name">{{ shop.name }}</text>
              <text class="shop-distance">{{ shop.distance }}km</text>
              <text class="shop-rating" style="display: flex;">
                <u-icon name="star-fill" size="16" color="#ffc107"></u-icon>
                {{ shop.rating }}
              </text>
              <button 
                class="shop-btn"
                hover-class="button-hover"
                @click="navigateTo(`/pages/maintenance/shop?id=${shop.id}`)"
              >
                预约服务
              </button>
            </view>
          </view>
        </view>
      </view>
    </u-transition>

    <!-- 飞手驿站 -->
    <u-transition :show="showIndex >= 8" name="fade-up" mode="out-in">
      <view class="section-card station-section">
        <view class="section-header">
          <view class="title-wrapper">
            <u-icon name="info-circle" size="22" color="#4facfe"></u-icon>
            <text class="title">飞手驿站</text>
          </view>
          <text class="more" @click="navigateTo('/pages/station/list')">查看全部 ></text>
        </view>
        
        <view 
          class="station-map"
          hover-class="button-hover"
          @click="navigateTo('/pages/station/map')"
        >
          <image src="/static/images/map-placeholder.png" mode="aspectFill"></image>
          <u-icon name="map" size="40" color="#ff4d4f" class="location-icon"></u-icon>
          <view class="station-count">
            附近有{{ nearbyStations.length }}个飞手驿站
          </view>
        </view>
        
        <view class="station-list">
          <view 
            class="station-item"
            v-for="(station, idx) in nearbyStations" 
            :key="idx"
            hover-class="card-hover"
          >
            <view class="station-info">
              <text class="station-name">{{ station.name }}</text>
              <text class="station-address">{{ station.address }}</text>
              <view class="station-services">
                <text class="service-tag" v-for="(service, i) in station.services" :key="i">
                  {{ service }}
                </text>
              </view>
            </view>
            <button 
              class="station-btn"
              hover-class="button-hover"
              @click="navigateTo(`/pages/station/detail?id=${station.id}`)"
            >
              前往
            </button>
          </view>
        </view>
      </view>
    </u-transition>

    <!-- 飞手任务 -->
    <u-transition :show="showIndex >= 9" name="fade-up" mode="out-in">
      <view class="section-card task-section">
        <view class="section-header">
          <view class="title-wrapper">
            <u-icon name="tags" size="22" color="#4facfe"></u-icon>
            <text class="title">飞手任务</text>
          </view>
          <text class="more" @click="navigateTo('/pages/task/task')">更多任务 ></text>
        </view>
        <view class="task-list">
          <view 
            v-for="(t, idx) in tasks" 
            :key="idx"
            class="task-item"
            hover-class="card-hover"
            @click="navigateTo(`/pages/task/detail?id=${t.id}`)"
          >
            <view class="task-left">
              <view class="task-title">{{ t.title }}</view>
              <view class="task-location">
                <u-icon name="map-fill" size="14" color="#999"></u-icon>
                {{ t.location }}
              </view>
              <view class="task-tags">
                <text class="tag" v-for="(tag, i) in t.tags" :key="i">{{ tag }}</text>
              </view>
            </view>
            <view class="task-right">
              <view class="task-reward">{{ t.reward }}</view>
              <button 
                class="grab-btn"
                hover-class="button-hover"
                @click.stop="grabTask(t.id)"
              >
                抢单
              </button>
            </view>
          </view>
        </view>
      </view>
    </u-transition>

    <!-- 社区 -->
    <u-transition :show="showIndex >= 10" name="fade-up" mode="out-in">
      <view class="section-card community-section">
        <view class="section-header">
          <view class="title-wrapper">
            <u-icon name="chat-fill" size="22" color="#4facfe"></u-icon>
            <text class="title">行业社区</text>
          </view>
          <text class="more" @click="navigateTo('/pages/community/index')">进入社区 ></text>
        </view>
        
        <!-- 社区分类 -->
        <scroll-view scroll-x class="community-tabs-scroll">
          <view 
            v-for="tab in communityTabs" 
            :key="tab.id"
            class="tab-item"
            :class="{active: activeTab === tab.id}"
            @click="activeTab = tab.id"
          >
            {{ tab.name }}
          </view>
        </scroll-view>
        
        <view class="topic-list">
          <view 
            v-for="(tp, idx) in filteredTopics" 
            :key="idx"
            class="topic-item"
            hover-class="card-hover"
            @click="navigateTo(`/pages/community/topic-detail?id=${tp.id}`)"
          >
            <view class="topic-header">
              <image :src="tp.authorAvatar" class="author-avatar" mode="aspectFill"></image>
              <text class="author-name">{{ tp.authorName }}</text>
              <text class="topic-time">{{ tp.time }}</text>
            </view>
            <view class="topic-title">#{{ tp.title }}</view>
            <view class="topic-desc">{{ tp.desc }}</view>
            <view class="topic-images" v-if="tp.images && tp.images.length">
              <image 
                :src="img" 
                mode="aspectFill" 
                v-for="(img, i) in tp.images" 
                :key="i"
              ></image>
            </view>
            <view class="topic-meta">
              <view class="meta-item" @click.stop>
                <u-icon name="thumb-up-fill" size="18" color="#999"></u-icon>
                {{ tp.likes }}
              </view>
              <view class="meta-item" @click.stop>
                <u-icon name="chat-fill" size="18" color="#999"></u-icon>
                {{ tp.comments }}评论
              </view>
              <view class="meta-item" @click.stop>
                <u-icon name="share-fill" size="18" color="#999"></u-icon>
                分享
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-transition>

    <!-- 回到顶部按钮 -->
    <u-back-top :scroll-top="scrollTop" :icon-style="{color: '#fff'}"></u-back-top>
    
    <!-- 申请职位对话框 -->
	
    <u-popup
      :show="showApplyDialog" 
      title="申请职位" 
      :showCancelButton="true"
      @confirm="confirmApply"
      @cancel="showApplyDialog = false"
    >
      <view class="apply-dialog-content">
        <text>请选择要发送的简历</text>
        <u-radio-group v-model="selectedResume">
          <u-radio 
            :label="resume.name" 
            :name="resume.id"
            v-for="resume in userResumes" 
            :key="resume.id"
          ></u-radio>
        </u-radio-group>
        <u--input 
          v-model="applyMessage" 
          placeholder="请输入给HR的留言..." 
          type="textarea"
          :border="true"
          height="120"
          style="margin-top: 20rpx;"
        ></u--input>
      </view>
    </u-popup>
	
	<helang-tabBar></helang-tabBar>
  </view>
</template>

<script>
import helangTabBar from '@/components/helang-tabBar/helang-tabBar.vue'
export default {
  components:{
	  helangTabBar
  },
  data() {
    return {
      weather: {
        temp: 26,
        condition: '晴'
      },
      currentCity: '上海市',
      showPicker: false,
      refreshing: false,
	  hotJobs: [
		  { id: 1, title: '无人机飞手' },
		  { id: 2, title: '航拍工程师' },
		  { id: 3, title: '无人机教练' },
		  { id: 4, title: '植保飞防员' }
	  ],
      cityList: [
        [
          { name: '北京市' },
          { name: '上海市' },
          { name: '广州市' },
          { name: '深圳市' },
          { name: '成都市' },
          { name: '杭州市' },
          { name: '武汉市' },
          { name: '西安市' }
        ]
      ],
      scrollTop: 0,
      showIndex: -1,
      showApplyDialog: false,
      selectedResume: '',
      applyMessage: '',
      currentJob: null,
      
      // 快捷入口扩展为8个核心功能
      quickEntries: [
        { icon: 'order', title: '发布任务', path: '/pages/task/publish', bgColor: 'linear-gradient(45deg, #a6c1ee, #fbc2eb)', color: '#fff' },
        { icon: 'coupon', title: '找飞手', path: '/pages/hall/hall', bgColor: 'linear-gradient(45deg, #ff9a9e, #fad0c4)', color: '#fff' },
        { icon: 'bag', title: '技能课堂', path: '/pages/task/points', bgColor: 'linear-gradient(45deg, #a18cd1, #fbc2eb)', color: '#fff' },
        { icon: 'shopping-cart', title: '商城', path: '/pages/shop/shop', bgColor: 'linear-gradient(45deg, #fbc2eb, #a6c1ee)', color: '#fff' },
        { icon: 'arrow-up-fill', title: '维修保养', path: '/pages/maintenance/list', bgColor: 'linear-gradient(45deg, #84fab0, #8fd3f4)', color: '#fff' },
        { icon: 'map', title: '飞手驿站', path: '/pages/station/list', bgColor: 'linear-gradient(45deg, #80d0c7, #13547a)', color: '#fff' },
        { icon: 'car', title: '租赁', path: '/pages/community/index', bgColor: 'linear-gradient(45deg, #d4fc79, #96e6a1)', color: '#fff' },
        { icon: 'order', title: '我的订单', path: '/pages/order/list', bgColor: 'linear-gradient(45deg, #ffecd2, #fcb69f)', color: '#fff' },
		{ icon: 'order', title: '资质指导', path: '/pages/QualificationGuide/QualificationGuide', bgColor: 'linear-gradient(45deg, #ffecd2, #fcb69f)', color: '#fff' },
		{ icon: 'order', title: '机构加盟', path: '/pages/advant/advant', bgColor: 'linear-gradient(45deg, #ffecd2, #fcb69f)', color: '#fff' }
      ],
      
      bannerList: [
        { 
          image: 'https://picsum.photos/id/121/400/300',
          path: '/pages/activity/detail?id=1',
          title: '无人机航拍大赛'
        },
        { 
          image: 'https://picsum.photos/id/122/400/300',
          path: '/pages/activity/detail?id=2',
          title: '新手飞手训练营'
        },
        { 
          image: 'https://picsum.photos/id/123/400/300',
          path: '/pages/activity/detail?id=3',
          title: '无人机新品发布会'
        },
        { 
          image: 'https://picsum.photos/id/124/400/300',
          path: '/pages/maintenance/promotion',
          title: '维修保养特惠活动'
        }
      ],
      
      // 招聘市场数据
      jobs: [
        { 
          id: 1,
          title: '无人机航拍员', 
          company: '飞天科技', 
          location: '北京',
          salary: '8K-12K',
          time: '1天前',
          tags: ['五险一金', '周末双休', '带薪年假']
        },
        { 
          id: 2,
          title: '无人机测绘员', 
          company: '蓝天航测', 
          location: '上海',
          salary: '10K-15K',
          time: '3天前',
          tags: ['五险一金', '绩效奖金']
        },
        { 
          id: 3,
          title: '农用无人机驾驶员', 
          company: '绿田农业', 
          location: '广州',
          salary: '6K-9K',
          time: '5天前',
          tags: ['包吃住', '季度奖金']
        }
      ],
      
      // 用户简历数据
      userResumes: [
        { id: 1, name: '我的完整简历' },
        { id: 2, name: '航拍专项简历' }
      ],
      
      // 飞手数据及筛选条件
      pilots: [
        { 
          id: 1,
          avatar: 'https://picsum.photos/id/124/400/300', 
          name: '张三', 
          tag: '航拍专家',
          level: 'Lv.5',
          levelColor: 'linear-gradient(45deg, #ff9a9e, #fad0c4)',
          rating: '4.9',
          orders: 128,
          skills: ['航拍', '影视制作']
        },
        { 
          id: 2,
          avatar: 'https://picsum.photos/id/125/400/300', 
          name: '李四', 
          tag: '测绘达人',
          level: 'Lv.4',
          levelColor: 'linear-gradient(45deg, #a6c1ee, #fbc2eb)',
          rating: '4.8',
          orders: 96,
          skills: ['测绘', '电力巡检']
        },
        { 
          id: 3,
          avatar: 'https://picsum.photos/id/126/400/300', 
          name: '王五', 
          tag: '农业喷洒',
          level: 'Lv.3',
          levelColor: 'linear-gradient(45deg, #fbc2eb, #a6c1ee)',
          rating: '4.7',
          orders: 72,
          skills: ['农业', '喷洒']
        }
      ],
      
      // 飞手筛选选项
      selectedSkill: '全部技能',
      selectedLevel: '全部等级',
      skillOptions: [
        { label: '全部技能', value: '' },
        { label: '航拍', value: '航拍' },
        { label: '测绘', value: '测绘' },
        { label: '农业', value: '农业' },
        { label: '巡检', value: '巡检' }
      ],
      levelOptions: [
        { label: '全部等级', value: '' },
        { label: 'Lv.5', value: 'Lv.5' },
        { label: 'Lv.4', value: 'Lv.4' },
        { label: 'Lv.3', value: 'Lv.3' }
      ],
      
      // 课程分类和数据
      courseCategories: [
        { id: 'all', name: '全部' },
        { id: 'theory', name: '理论法规' },
        { id: 'practice', name: '实操技能' },
        { id: 'exam', name: '考证培训' }
      ],
      activeCategory: 'all',
      lessons: [
        { 
          id: 1,
          cover: 'https://picsum.photos/id/128/400/300', 
          title: '航拍入门技巧', 
          desc: '掌握基础飞行与构图',
          views: '1.2万',
          likes: '856',
          price: 99,
          category: 'practice',
          progress: 35
        },
        { 
          id: 2,
          cover: 'https://picsum.photos/id/129/400/300', 
          title: '无人机测绘', 
          desc: '精准地图制作方法',
          views: '8.6千',
          likes: '642',
          price: 199,
          category: 'practice',
          progress: 0
        },
        { 
          id: 3,
          cover: 'https://picsum.photos/id/130/400/300', 
          title: '民航法规解读', 
          desc: '最新无人机飞行管理条例',
          views: '5.3千',
          likes: '423',
          price: 0,
          category: 'theory',
          progress: 75
        }
      ],
      
      // 商品数据（包含新机、二手、租赁）
      activeProductType: 0,
      productTypeOptions: ['全部', '新机', '二手', '租赁'],
      products: [
        { 
          id: 1,
          image: 'https://picsum.photos/id/132/400/300', 
          title: '航拍无人机X1', 
          desc: '4K高清 30分钟续航',
          price: '6999',
          originalPrice: '7999',
          sales: '256',
          salesText: '售256',
          tag: '新品',
          type: 'new'
        },
        { 
          id: 2,
          image: 'https://picsum.photos/id/133/400/300', 
          title: '二手精灵4 Pro', 
          desc: '9成新 无维修记录',
          price: '4500',
          originalPrice: '7999',
          sales: '12',
          salesText: '售12',
          tag: '优选',
          type: 'secondhand'
        },
        { 
          id: 3,
          image: 'https://picsum.photos/id/134/400/300', 
          title: '农业无人机A3', 
          desc: '10L大容量 智能喷洒',
          price: '15999',
          originalPrice: '17999',
          sales: '86',
          salesText: '售86',
          tag: '特惠',
          type: 'new'
        }
      ],
      
      // 维修保养相关数据
      nearbyShops: [
        {
          id: 1,
          name: '蓝天无人机维修中心',
          distance: 2.5,
          rating: 4.8
        },
        {
          id: 2,
          name: '飞手之家服务站',
          distance: 3.8,
          rating: 4.6
        }
      ],
      
      // 飞手驿站数据
      nearbyStations: [
        {
          id: 1,
          name: '上海浦东飞手驿站',
          address: '浦东新区张江高科技园区博云路123号',
          services: ['设备充电', '临时存放', '技术支持']
        },
        {
          id: 2,
          name: '虹桥无人机服务中心',
          address: '闵行区虹桥天地2号楼101',
          services: ['设备租赁', '电池更换', '培训咨询']
        }
      ],
      
      // 任务数据
      tasks: [
        { 
          id: 1,
          title: '城市宣传视频拍摄', 
          reward: '￥1500', 
          location: '北京朝阳区',
          time: '2小时前',
          tags: ['航拍', '高清', '3天工期']
        },
        { 
          id: 2,
          title: '农田喷洒', 
          reward: '￥800/亩', 
          location: '河北石家庄',
          time: '5小时前',
          tags: ['农业', '无人机喷洒', '100亩']
        }
      ],
      
      // 社区数据
      communityTabs: [
        { id: 'all', name: '全部' },
        { id: 'question', name: '问答' },
        { id: 'share', name: '经验' },
        { id: 'activity', name: '活动' }
      ],
      activeTab: 'all',
      topics: [
        { 
          id: 1,
          title: '航拍技巧分享', 
          desc: '如何拍出电影感的航拍画面？分享你的经验和作品', 
          views: '1.2万',
          comments: '356',
          likes: 245,
          authorAvatar: 'https://picsum.photos/id/136/100/100',
          authorName: '飞手小李',
          time: '2小时前',
          type: 'share',
          images: [
            'https://picsum.photos/id/137/200/200',
            'https://picsum.photos/id/138/200/200'
          ]
        },
        { 
          id: 2,
          title: '无人机维修经验', 
          desc: '常见无人机故障及自行维修方法大全', 
          views: '8.6千',
          comments: '189',
          likes: 156,
          authorAvatar: 'https://picsum.photos/id/139/100/100',
          authorName: '维修大师',
          time: '昨天',
          type: 'share'
        }
      ]
    }
  },
  computed: {
    weatherIcon() {
      const map = {
        '晴': 'more-dot-fill',
        '多云': 'more-dot-fill',
        '阴': 'more-dot-fill',
        '小雨': 'more-dot-fill'
      }
      return map[this.weather.condition] || 'sun-fill'
    },
    // 筛选飞手
    filteredPilots() {
      return this.pilots.filter(pilot => {
        const skillMatch = this.selectedSkill === '全部技能' || 
                          (pilot.skills && pilot.skills.includes(this.selectedSkill));
        const levelMatch = this.selectedLevel === '全部等级' || 
                          pilot.level === this.selectedLevel;
        return skillMatch && levelMatch;
      });
    },
    // 筛选课程
    filteredLessons() {
      if (this.activeCategory === 'all') {
        return this.lessons;
      }
      return this.lessons.filter(lesson => lesson.category === this.activeCategory);
    },
    // 筛选商品
    filteredProducts() {
      if (this.activeProductType === 0) { // 全部
        return this.products;
      }
      
      const typeMap = ['', 'new', 'secondhand', 'rental'];
      const currentType = typeMap[this.activeProductType];
      
      return this.products.filter(product => product.type === currentType);
    },
    // 筛选社区话题
    filteredTopics() {
      if (this.activeTab === 'all') {
        return this.topics;
      }
      return this.topics.filter(topic => topic.type === this.activeTab);
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onLoad() {
    // 分步动画加载
    let i = 0
    const interval = setInterval(() => {
      this.showIndex++
      if (this.showIndex >= 11) clearInterval(interval)
    }, 150)
  },
  methods: {
    refreshWeather() {
      this.refreshing = true
      uni.showLoading({ title: '获取天气中...', mask: true })
      
      // 模拟API请求
      setTimeout(() => {
        this.weather.temp = Math.round(20 + Math.random() * 15)
        this.weather.condition = ['晴', '多云', '阴', '小雨'][Math.floor(Math.random() * 4)]
        uni.hideLoading()
        this.refreshing = false
        uni.showToast({ 
          title: `${this.currentCity}天气已更新`, 
          icon: 'none',
          position: 'top'
        })
      }, 800)
    },
    showCityPicker() {
      this.showPicker = true
    },
    confirmCity(e) {
      this.currentCity = e.value[0].name
      this.showPicker = false
      this.refreshWeather()
      uni.showToast({ 
        title: `已定位到${this.currentCity}`, 
        icon: 'none',
        position: 'top'
      })
    },
    navigateTo(path) {
      uni.navigateTo({
        url: path
      })
    },
    handleBannerClick(index) {
      const item = this.bannerList[index]
      if (item.path) {
        this.navigateTo(item.path)
      }
    },
    handleEntryClick(path) {
      this.navigateTo(path)
    },
    // 飞手筛选
    handleSkillChange(value) {
      this.selectedSkill = value.label;
    },
    handleLevelChange(value) {
      this.selectedLevel = value.label;
    },
    // 商品类型切换
    handleProductTypeChange(index) {
      this.activeProductType = index;
    },
    // 显示申请职位对话框
    showApplyDialogs(job) {
      this.currentJob = job;
      this.showApplyDialog = true;
      // 默认选择第一个简历
      if (this.userResumes.length > 0) {
        this.selectedResume = this.userResumes[0].id;
      }
      this.applyMessage = '';
    },
    // 确认申请职位
    confirmApply() {
      if (!this.selectedResume) {
        uni.showToast({
          title: '请选择简历',
          icon: 'none'
        });
        return;
      }
      
      // 模拟提交申请
      uni.showLoading({ title: '提交中...', mask: true });
      setTimeout(() => {
        uni.hideLoading();
        this.showApplyDialog = false;
        uni.showToast({
          title: `已向${this.currentJob.company}发送申请`,
          icon: 'none'
        });
      }, 1000);
    },
    // 抢单功能
    grabTask(taskId) {
      uni.showLoading({ title: '抢单中...', mask: true });
      setTimeout(() => {
        uni.hideLoading();
        // 模拟抢单结果
        const success = Math.random() > 0.3; // 70%成功率
        if (success) {
          uni.showToast({
            title: '抢单成功！',
            icon: 'success'
          });
        } else {
          uni.showToast({
            title: '手慢了，任务已被抢走',
            icon: 'none'
          });
        }
      }, 1000);
    }
  }
}
</script>

<style lang="scss" scoped>
.recruitment-module {
  padding: 0 30rpx 30rpx;
  margin-top: 10rpx;
}

// 模块标题
.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .module-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .module-more {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #4facfe;
  }
}

// 卡片容器
.recruitment-cards {
  display: flex;
  gap: 20rpx;
  height: 220rpx;
}

// 卡片基础样式
.recruitment-card {
  flex: 1;
  border-radius: 20rpx;
  padding: 25rpx;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
}

// 雇主卡片样式
.employer-card {
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f4ff 100%);
}

// 求职者卡片样式
.seeker-card {
  background: linear-gradient(135deg, #fff0f3 0%, #ffe6ec 100%);
}

// 卡片内容
.card-content {
  display: flex;
  align-items: center;
  flex: 1;
}

.card-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.employer-card .card-icon {
  background-color: rgba(79, 172, 254, 0.15);
}

.seeker-card .card-icon {
  background-color: rgba(250, 112, 154, 0.15);
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.card-desc {
  font-size: 22rpx;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-arrow {
  padding-left: 10rpx;
}

// 装饰元素
.decor-element {
  position: absolute;
  width: 120rpx;
  height: 120rpx;
  opacity: 0.1;
  border-radius: 50%;
}

.top-left {
  top: -40rpx;
  left: -40rpx;
}

.bottom-right {
  bottom: -40rpx;
  right: -40rpx;
}

.employer-card .decor-element {
  background-color: #4facfe;
}

.seeker-card .decor-element {
  background-color: #fa709a;
}

// 交互效果
.card-hover {
  transform: translateY(-5rpx);
  box-shadow: 0 12rpx 30rpx rgba(0, 0, 0, 0.12);
}

// 热门岗位提示
.hot-jobs-tip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-top: 20rpx;
  padding-top: 15rpx;
  border-top: 1rpx dashed #eee;
  
  .tip-text {
    font-size: 24rpx;
    color: #999;
  }
  
  .job-tag {
    font-size: 24rpx;
    color: #4facfe;
    background-color: rgba(79, 172, 254, 0.1);
    padding: 5rpx 15rpx;
    border-radius: 20rpx;
    white-space: nowrap;
  }
}
.home-page {
  padding-bottom: 40rpx;
  background-color: #f5f7fa;
}

/* 顶部导航栏样式 */
.top-bar {
  position: relative;
  width: 100%;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  min-height: calc(120rpx + constant(safe-area-inset-top));
  min-height: calc(120rpx + env(safe-area-inset-top));
  overflow: hidden;
  box-sizing: border-box;
}

.bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #4A90E2 0%, #1A365D 100%);
  box-shadow: 0 10rpx 30rpx rgba(0, 47, 128, 0.2);
}

.bg-gradient::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  transform: rotate(15deg);
  z-index: 1;
}

.header-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  width: 100%;
  box-sizing: border-box;
}

.weather-card {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 10rpx 15rpx;
  border-radius: 12rpx;
  backdrop-filter: blur(8rpx);
  transition: all 0.3s ease;
}

.weather-card:active {
  background-color: rgba(255, 255, 255, 0.15);
}

.refresh-icon {
  transition: transform 0.3s ease;
}

.refresh-icon.rotating {
  animation: rotating 1s linear infinite;
}

@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.temperature {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.condition {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

.search-bar {
  flex: 1;
  margin: 0 20rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 35rpx;
  backdrop-filter: blur(10rpx);
  transition: all 0.3s ease;
}

.search-bar:active {
  background-color: rgba(255, 255, 255, 0.25);
}

.search-bar input {
  flex: 1;
  margin: 0 10rpx;
  font-size: 26rpx;
  color: #fff;
  border: none;
  background: transparent;
  outline: none;
}

.search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-hint {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
  padding-left: 5rpx;
}

.location-card {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 10rpx 15rpx;
  border-radius: 12rpx;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8rpx);
  transition: all 0.3s ease;
}

.location-card:active {
  background-color: rgba(255, 255, 255, 0.15);
}

.city {
  font-size: 28rpx;
  color: #fff;
  font-weight: 500;
}

/* 轮播图样式 */
.banner-box {
  margin: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;

  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
  transform: translateY(-10rpx);
}

/* 快捷入口样式 */
.quick-entry {
  display: flex;
  flex-wrap: wrap;
  margin: 20rpx;
  padding: 20rpx 0;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .entry-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
    margin-bottom: 15rpx;
    transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    
    &:active {
      transform: scale(0.95);
    }
    
    .icon-box {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12rpx;
    }
    
    .entry-title {
      font-size: 24rpx;
      color: #666;
    }
  }
}

.entry-hover {
  transform: scale(0.95);
  opacity: 0.9;
}

/* 供需广场入口 */
.supply-demand-entrance {
  display: flex;
  margin: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
  height: 140rpx;
  position: relative;
  
  .demand-side, .supply-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30rpx;
    font-weight: 500;
    position: relative;
    z-index: 1;
  }
  
  .demand-side {
    background: linear-gradient(45deg, #4facfe, #00f2fe);
  }
  
  .supply-side {
    background: linear-gradient(45deg, #fa709a, #fee140);
  }
  
  .pulse-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
    animation: pulse 2s infinite;
    opacity: 0;
  }
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.5; }
  70% { transform: scale(1.05); opacity: 0; }
  100% { transform: scale(0.95); opacity: 0; }
}

/* 通用区块样式 */
.section-card {
  background: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    
    .title-wrapper {
      display: flex;
      align-items: center;
      
      .title {
        font-size: 32rpx;
        font-weight: bold;
        margin-left: 8rpx;
      }
    }
    
    .more {
      font-size: 26rpx;
      color: #999;
    }
    
    .filter-bar {
      display: flex;
      align-items: center;
      gap: 15rpx;
    }
  }
  
  .scroll-x {
    white-space: nowrap;
    display: flex;
    overflow-x: auto;
    padding-bottom: 10rpx;
    
    &::-webkit-scrollbar {
      display: none;
    }
  }
}

/* 卡片悬停效果 */
.card-hover {
  transform: translateY(-5rpx);
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 按钮悬停效果 */
.button-hover {
  opacity: 0.9;
  transform: scale(0.98);
  transition: all 0.2s ease;
}

/* 招聘市场样式 */
.job-market {
  .job-list {
    .job-item {
      display: flex;
      justify-content: space-between;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .job-title {
        font-size: 30rpx;
        font-weight: 500;
        margin-bottom: 8rpx;
      }
      
      .job-company {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 12rpx;
        display: flex;
        align-items: center;
      }
      
      .job-tags {
        display: flex;
        flex-wrap: wrap;
        
        .tag {
          font-size: 20rpx;
          color: #4facfe;
          background: #e6f7ff;
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
          margin-right: 10rpx;
          margin-bottom: 6rpx;
        }
      }
      
      .job-right {
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .job-salary {
          color: #ff4d4f;
          font-weight: bold;
          font-size: 30rpx;
          margin-bottom: 8rpx;
        }
      }
    }
  }
}

/* 飞手列表样式 */
.pilot-section {
  .pilot-scroll {
    white-space: nowrap;
    padding-bottom: 10rpx;
    
    .pilot-card {
      width: 200rpx;
      margin-right: 20rpx;
      display: inline-block;
      background: #fff;
      border-radius: 16rpx;
      padding: 20rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      
      .pilot-avatar {
        position: relative;
        
        image {
          width: 160rpx;
          height: 160rpx;
          border-radius: 50%;
          display: block;
          margin: 0 auto 16rpx;
        }
        
        .level-badge {
          position: absolute;
          bottom: 16rpx;
          right: 20rpx;
          color: #fff;
          font-size: 20rpx;
          padding: 2rpx 10rpx;
          border-radius: 20rpx;
        }
      }
      
      .pilot-info {
        text-align: center;
        
        .pilot-name {
          font-size: 28rpx;
          font-weight: 500;
          margin-bottom: 4rpx;
        }
        
        .pilot-tag {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 12rpx;
        }
        
        .pilot-stats {
          display: flex;
          justify-content: center;
          font-size: 22rpx;
          color: #666;
          margin-bottom: 15rpx;
          
          .stat-item {
            display: flex;
            align-items: center;
            margin: 0 6rpx;
          }
        }
        
        .hire-btn {
          background: #4facfe;
          color: #fff;
          border: none;
          border-radius: 20rpx;
          font-size: 24rpx;
          padding: 5rpx 0;
          width: 100%;
        }
      }
    }
  }
}

/* 技能课堂样式 */
.course-section {
  .category-scroll {
    white-space: nowrap;
    margin-bottom: 20rpx;
    padding-bottom: 5rpx;
    
    .category-item {
      padding: 8rpx 20rpx;
      background: #f5f7fa;
      border-radius: 20rpx;
      font-size: 26rpx;
      margin-right: 15rpx;
      white-space: nowrap;
      display: inline-block;
      transition: all 0.3s ease;
      
      &.active {
        background: #4facfe;
        color: #fff;
        transform: scale(1.05);
        font-weight: bold;
      }
    }
  }
  
  .lesson-scroll {
    white-space: nowrap;
    padding-bottom: 10rpx;
    
    .lesson-card {
      width: 280rpx;
      margin-right: 20rpx;
      display: inline-block;
      background: #fff;
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      
      image {
        width: 280rpx;
        height: 160rpx;
        display: block;
      }
      
      .lesson-info {
        padding: 16rpx;
        
        .lesson-title {
          font-size: 28rpx;
          font-weight: 500;
          margin-bottom: 8rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .lesson-progress {
          margin: 10rpx 0;
          
          text {
            font-size: 22rpx;
            color: #4facfe;
            display: block;
            margin-bottom: 5rpx;
          }
        }
        
        .lesson-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          
          .views {
            font-size: 22rpx;
            color: #999;
            margin-left: 5rpx;
          }
          
          .price {
            font-size: 26rpx;
            color: #ff4d4f;
            font-weight: bold;
            
            &.free {
              color: #4facfe;
            }
          }
        }
      }
    }
  }
  
  .exam-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f7fa;
    padding: 20rpx;
    border-radius: 16rpx;
    margin-top: 20rpx;
    
    text {
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
    }
  }
}

/* 商城服务样式 */
.shop-section {
  .product-scroll {
    white-space: nowrap;
    padding-bottom: 10rpx;
    
    .product-card {
      width: 240rpx;
      margin-right: 20rpx;
      display: inline-block;
      background: #fff;
      border-radius: 16rpx;
      overflow: hidden;
      position: relative;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      
      .product-tag {
        position: absolute;
        top: 10rpx;
        left: 10rpx;
        background: #ff4d4f;
        color: #fff;
        font-size: 20rpx;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
        z-index: 2;
      }
      
      .product-type-badge {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        background: #4facfe;
        color: #fff;
        font-size: 20rpx;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
        z-index: 2;
      }
      
      image {
        width: 240rpx;
        height: 240rpx;
        display: block;
      }
      
      .product-info {
        padding: 16rpx;
        
        .product-title {
          font-size: 28rpx;
          font-weight: 500;
          margin-bottom: 8rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .product-desc {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 12rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .product-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .product-price {
            .current {
              font-size: 28rpx;
              color: #ff4d4f;
              font-weight: bold;
            }
            
            .original {
              font-size: 22rpx;
              color: #999;
              text-decoration: line-through;
              margin-left: 8rpx;
            }
            
            .unit {
              font-size: 22rpx;
              color: #999;
              margin-left: 5rpx;
            }
          }
          
          .product-sales {
            font-size: 22rpx;
            color: #999;
          }
        }
      }
    }
  }
}

/* 维修保养样式 */
.maintenance-section {
  .maintenance-services {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30rpx;
    
    .service-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 20%;
      
      text {
        font-size: 24rpx;
        margin-top: 15rpx;
        color: #333;
        text-align: center;
      }
    }
  }
  
  .nearby-shops {
    margin-top: 20rpx;
    
    .shops-title {
      font-size: 26rpx;
      font-weight: 500;
      margin-bottom: 15rpx;
      display: block;
    }
    
    .shop-list {
      .shop-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .shop-name {
          font-size: 26rpx;
          font-weight: 500;
        }
        
        .shop-distance, .shop-rating {
          font-size: 24rpx;
          color: #999;
          margin: 0 10rpx;
        }
        
        .shop-btn {
          background: #4facfe;
          color: #fff;
          border: none;
          border-radius: 20rpx;
          font-size: 22rpx;
          padding: 5rpx 15rpx;
        }
      }
    }
  }
}

/* 飞手驿站样式 */
.station-section {
  .station-map {
    width: 100%;
    height: 250rpx;
    border-radius: 16rpx;
    overflow: hidden;
    position: relative;
    margin-bottom: 20rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
    
    .location-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    .station-count {
      position: absolute;
      bottom: 15rpx;
      left: 15rpx;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 24rpx;
      padding: 5rpx 15rpx;
      border-radius: 20rpx;
    }
  }
  
  .station-list {
    .station-item {
      display: flex;
      justify-content: space-between;
      padding: 15rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .station-info {
        flex: 1;
        
        .station-name {
          font-size: 26rpx;
          font-weight: 500;
          margin-bottom: 5rpx;
          display: block;
        }
        
        .station-address {
          font-size: 22rpx;
          color: #999;
          margin-bottom: 10rpx;
          display: block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .station-services {
          display: flex;
          flex-wrap: wrap;
          
          .service-tag {
            font-size: 20rpx;
            color: #666;
            background: #f5f7fa;
            padding: 3rpx 10rpx;
            border-radius: 15rpx;
            margin-right: 10rpx;
            margin-bottom: 5rpx;
          }
        }
      }
      
      .station-btn {
        background: #4facfe;
        color: #fff;
        border: none;
        border-radius: 20rpx;
        font-size: 22rpx;
        padding: 5rpx 15rpx;
        align-self: center;
      }
    }
  }
}

/* 任务列表样式 */
.task-section {
  .task-list {
    .task-item {
      display: flex;
      justify-content: space-between;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .task-left {
        .task-title {
          font-size: 30rpx;
          font-weight: 500;
          margin-bottom: 8rpx;
        }
        
        .task-location {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 12rpx;
          display: flex;
          align-items: center;
        }
        
        .task-tags {
          display: flex;
          flex-wrap: wrap;
          
          .tag {
            font-size: 20rpx;
            color: #4facfe;
            background: #e6f7ff;
            padding: 4rpx 12rpx;
            border-radius: 20rpx;
            margin-right: 10rpx;
            margin-bottom: 6rpx;
          }
        }
      }
      
      .task-right {
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .task-reward {
          color: #ff4d4f;
          font-weight: bold;
          font-size: 30rpx;
          margin-bottom: 8rpx;
        }
        
        .grab-btn {
          background: #ff4d4f;
          color: #fff;
          border: none;
          border-radius: 20rpx;
          font-size: 24rpx;
          padding: 5rpx 0;
          width: 120rpx;
        }
      }
    }
  }
}

/* 社区样式 */
.community-section {
  .community-tabs-scroll {
    white-space: nowrap;
    margin-bottom: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;
    padding-bottom: 5rpx;
    
    .tab-item {
      padding: 10rpx 20rpx;
      font-size: 26rpx;
      margin-right: 10rpx;
      position: relative;
      display: inline-block;
      
      &.active {
        color: #4facfe;
        font-weight: 500;
      }
      
      &.active::after {
        content: '';
        position: absolute;
        bottom: -1rpx;
        left: 0;
        width: 100%;
        height: 4rpx;
        background: #4facfe;
      }
    }
  }
  
  .topic-list {
    .topic-item {
      padding: 24rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .topic-header {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
        
        .author-avatar {
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          margin-right: 10rpx;
        }
        
        .author-name {
          font-size: 24rpx;
          font-weight: 500;
          margin-right: 15rpx;
        }
        
        .topic-time {
          font-size: 22rpx;
          color: #999;
        }
      }
      
      .topic-title {
        font-size: 28rpx;
        font-weight: 500;
        color: #4facfe;
        margin-bottom: 8rpx;
      }
      
      .topic-desc {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 15rpx;
        line-height: 1.5;
      }
      
      .topic-images {
        display: flex;
        gap: 10rpx;
        margin-bottom: 15rpx;
        
        image {
          width: 150rpx;
          height: 150rpx;
          border-radius: 10rpx;
        }
      }
      
      .topic-meta {
        display: flex;
        
        .meta-item {
          margin-right: 25rpx;
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}

/* 申请职位对话框 */
.apply-dialog-content {
  padding: 10rpx 0;
  
  text {
    display: block;
    font-size: 26rpx;
    margin-bottom: 15rpx;
  }
  
  u-radio {
    margin-bottom: 15rpx;
  }
  
  u-input {
    margin-top: 20rpx;
  }
}


</style>